<template>
  <div class="dashboard-container">
    <el-row v-permission="['*']" :gutter="20" justify="space-between" class="panel-group">
      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" class="card-panel-col">
        <el-card shadow="always">
          <el-skeleton :loading="loading" :rows="2" animated>
            <div class="card-panel">
              <div class="card-panel-icon-wrapper icon-people">
                <svg-icon icon-class="peoples" class-name="card-panel-icon" />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">用户总数</div>
                <count-to :start-val="0" :end-val="userCount" :duration="3000" class="card-panel-num" />
              </div>
            </div>
          </el-skeleton>
        </el-card>
      </el-col>
      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" class="card-panel-col">
        <el-card shadow="always">
          <el-skeleton :loading="loading" :rows="2" animated>
            <div class="card-panel">
              <div class="card-panel-icon-wrapper icon-message">
                <svg-icon icon-class="documentation" class-name="card-panel-icon" />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">文章发布数</div>
                <count-to :start-val="0" :end-val="blogCount" :duration="3000" class="card-panel-num" />
              </div>
            </div>
          </el-skeleton>
        </el-card>
      </el-col>
      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}">
        <el-card shadow="always">
          <el-skeleton :loading="loading" :rows="2" animated>
            <div class="card-panel">
              <div class="card-panel-icon-wrapper icon-shopping">
                <svg-icon icon-class="shopping" class-name="card-panel-icon" />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">订单总数</div>
                <count-to :start-val="0" :end-val="orderCount" :duration="3000" class="card-panel-num" />
              </div>
            </div>
          </el-skeleton>
        </el-card>
      </el-col>
      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}">
        <el-card shadow="always">
          <el-skeleton :loading="loading" :rows="2" animated>
            <div class="card-panel">
              <div class="card-panel-icon-wrapper icon-money">
                <svg-icon icon-class="money" class-name="card-panel-icon" />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">成交金额</div>
                <count-to :start-val="0" :end-val="0" :duration="3000" class="card-panel-num" />
              </div>
            </div>
          </el-skeleton>
        </el-card>
      </el-col>
    </el-row>

    <el-row v-permission="['*']" :gutter="20" justify="space-between" style="margin-bottom: 20px">
      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 8}" :xl="{span: 8}">
        <el-card style="padding:0px;margin-left:8px ">
          <div slot="header" class="clearfix">
            <span>用户来源</span>
            <el-dropdown style="float:right;">
              <span class="el-dropdown-link">
                {{ mapTypeChoice }}<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item><span @click="handleMapData('0', '今日')">今日</span></el-dropdown-item>
                <el-dropdown-item><span @click="handleMapData('1', '本周')">本周</span></el-dropdown-item>
                <el-dropdown-item><span @click="handleMapData('2', '本月')">本月</span></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <el-skeleton :loading="loading" :rows="4" animated>
            <map-chart :chart-data="mapChartData" height="400px" />
          </el-skeleton>
        </el-card>
      </el-col>

      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 8}" :xl="{span: 8}">
        <el-card style="padding:0px;margin-left:8px ">
          <el-card style="padding:0px;margin-left:8px ">
            <el-skeleton :loading="loading" :rows="4" animated>
              <line-chart :chart-data="loginChartData" />
            </el-skeleton>
          </el-card>
        </el-card>
      </el-col>

      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 8}" :xl="{span: 8}">
        <el-row :gutter="20" justify="space-between">
          <el-col :span="24">
            <el-card shadow="hover">
              <div slot="header" class="clearfix">
                <span style="font-weight: bold">服务器CPU</span>
              </div>
              <el-skeleton :loading="loading" :rows="4" animated>
                <el-row :gutter="20">
                  <el-col :span="12">核心数</el-col>
                  <el-col :span="12">{{ server.cpu.cpuNum }}</el-col>
                  <el-col :span="12">用户使用率</el-col>
                  <el-col :span="12">{{ server.cpu.used }}%</el-col>
                  <el-col :span="12">系统使用率</el-col>
                  <el-col :span="12">{{ server.cpu.sys }}%</el-col>
                  <el-col :span="12">当前空闲率</el-col>
                  <el-col :span="12">{{ server.cpu.free }}%</el-col>
                </el-row>
              </el-skeleton>
            </el-card>
          </el-col>
          <el-col :span="24">
            <el-card shadow="hover">
              <div slot="header" class="clearfix">
                <span style="font-weight: bold">服务器内存</span>
              </div>
              <el-skeleton :loading="loading" :rows="4" animated>
                <el-row :gutter="20">
                  <el-col :span="8">属性</el-col>
                  <el-col :span="8">内存</el-col>
                  <el-col :span="8">JVM</el-col>
                  <el-divider />
                  <el-col :span="8">总内存</el-col>
                  <el-col :span="8">{{ server.mem.total }}GB</el-col>
                  <el-col :span="8">{{ server.jvm.total }}MB</el-col>
                  <el-col :span="8">已用内存</el-col>
                  <el-col :span="8">{{ server.mem.used }}GB</el-col>
                  <el-col :span="8">{{ server.jvm.used }}MB</el-col>
                  <el-col :span="8">剩余内存</el-col>
                  <el-col :span="8">{{ server.mem.free }}GB</el-col>
                  <el-col :span="8">{{ server.jvm.free }}MB</el-col>
                  <el-col :span="8">使用率</el-col>
                  <el-col :span="8" :style="{'color':server.mem.usage>=80 ? 'red':'green'}">{{ server.mem.usage }}%</el-col>
                  <el-col :span="8" :style="{'color':server.jvm.usage>=80 ? 'red':'green'}">{{ server.jvm.usage }}%</el-col>
                </el-row>
              </el-skeleton>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <el-row v-permission="['*']" :gutter="20" justify="space-between" style="margin-bottom: 20px">
      <el-col :span="12">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold">虚拟机信息</span>
          </div>
          <el-skeleton :loading="loading" :rows="4" animated>
            <el-row :gutter="20">
              <el-col :span="6">Java名称</el-col>
              <el-col :span="6">{{ server.jvm.name }}</el-col>
              <el-col :span="6">Java版本</el-col>
              <el-col :span="6">{{ server.jvm.version }}</el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6">启动时间</el-col>
              <el-col :span="6">{{ server.jvm.startTime }}</el-col>
              <el-col :span="6">运行时长</el-col>
              <el-col :span="6">{{ server.jvm.runTime }}</el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="3">安装路径</el-col>
              <el-col :span="9">{{ server.jvm.home }}</el-col>
              <el-col :span="3">项目路径</el-col>
              <el-col :span="9">{{ server.sys.userDir }}</el-col>
            </el-row>
          </el-skeleton>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold">服务器信息</span>
          </div>
          <el-skeleton :loading="loading" :rows="4" animated>
            <el-row :gutter="20">
              <el-col :span="6">服务器名称</el-col>
              <el-col :span="6">{{ server.sys.computerName }}</el-col>
              <el-col :span="6">操作系统</el-col>
              <el-col :span="6">{{ server.sys.osName }}</el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6">服务器IP</el-col>
              <el-col :span="6">{{ server.sys.computerIp }}</el-col>
              <el-col :span="6">系统架构</el-col>
              <el-col :span="6">{{ server.sys.osArch }}</el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6">服务器时间</el-col>
              <el-col :span="6">{{ server.sys.osTime }}</el-col>
            </el-row>
          </el-skeleton>
        </el-card>
      </el-col>
    </el-row>

    <el-row v-permission="['*']" :gutter="20" justify="space-between" style="margin-bottom: 20px">
      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 9}" :xl="{span: 9}">
        <el-row :gutter="20" justify="space-between">
          <el-col :span="24">
            <el-card shadow="hover">
              <div slot="header" class="clearfix">
                <label>缓存客户端</label>
              </div>
              <el-skeleton :loading="cacheLoading" :rows="4" animated>
                <el-row :gutter="20">
                  <el-col :span="12">Redis版本</el-col>
                  <el-col :span="12">{{ cache.info.redis_version }}</el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">运行模式</el-col>
                  <el-col :span="12">{{ cache.info.redis_mode == "standalone" ? "单机" : "集群" }}</el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">端口</el-col>
                  <el-col :span="12">{{ cache.info.tcp_port }}</el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">客户端数</el-col>
                  <el-col :span="12">{{ cache.info.connected_clients }}</el-col>
                </el-row>
              </el-skeleton>
            </el-card>
          </el-col>
          <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}">
            <el-card shadow="hover">
              <div slot="header" class="clearfix">
                <label>缓存状态</label>
              </div>
              <el-skeleton :loading="cacheLoading" :rows="4" animated>
                <el-row :gutter="20">
                  <el-col :span="12">运行时间(天)</el-col>
                  <el-col :span="12">{{ cache.info.uptime_in_days }}</el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">使用内存</el-col>
                  <el-col :span="12">{{ cache.info.used_memory_human }}</el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">使用CPU</el-col>
                  <el-col :span="12">{{ parseFloat(cache.info.used_cpu_user_children).toFixed(2) }}</el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">内存配置</el-col>
                  <el-col :span="12">{{ cache.info.maxmemory_human }}</el-col>
                </el-row>
              </el-skeleton>
            </el-card>
          </el-col>
          <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}">
            <el-card shadow="hover">
              <div slot="header" class="clearfix">
                <label>缓存配置</label>
              </div>
              <el-skeleton :loading="cacheLoading" :rows="4" animated>
                <el-row :gutter="20">
                  <el-col :span="12">AOF是否开启</el-col>
                  <el-col :span="12">{{ cache.info.aof_enabled === "0" ? "否" : "是" }}</el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">RDB是否成功</el-col>
                  <el-col :span="12">{{ cache.info.rdb_last_bgsave_status }}</el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">Key数量</el-col>
                  <el-col :span="12">{{ cache.dbSize }}</el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">网络入口/出口</el-col>
                  <el-col :span="12">{{ cache.info.instantaneous_input_kbps }}kps/{{ cache.info.instantaneous_output_kbps }}kps</el-col>
                </el-row>
              </el-skeleton>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 7}" :xl="{span: 7}">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <label>命令统计</label>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="commandstats" style="height: 300px" />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 7}" :xl="{span: 7}">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <label>内存信息</label>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="usedmemory" style="height: 300px" />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row v-permission="['*']" :gutter="20" justify="space-between">
      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}">
        <el-card>
          <div slot="header">
            <label>键名列表</label>
            <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-refresh-right" @click="refreshKeys" />
            <el-button style="float: right; padding: 3px 0; margin-right: 10px" type="text" icon="el-icon-search" @click="handleSearchKeys()" />
          </div>
          <el-table ref="cache_key_table"
                    v-loading="tableLoading"
                    :data="cacheKeyData"
                    height="400px"
                    @row-click="handleKeyValue">
            <el-table-column align="center" label="缓存键名" show-overflow-tooltip>
              <template slot-scope="scope">{{ scope.row }}</template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="60">
              <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteKey(scope.row)" />
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}">
        <el-card :bordered="false">
          <div slot="header">
            <label>缓存内容</label>
            <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-refresh-right" @click="handleDeleteKeys()">清理全部</el-button>
          </div>
          <el-form :model="cacheForm">
            <el-row :gutter="32">
              <el-col :offset="1" :span="22">
                <el-form-item label="缓存键名:" prop="key">
                  <el-input v-model="cacheForm.key" readonly />
                </el-form-item>
              </el-col>
              <el-col :offset="1" :span="22">
                <el-form-item label="缓存内容:" prop="value">
                  <el-input v-model="cacheForm.value" type="textarea" :rows="13" readonly />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import echarts from 'echarts'
import LineChart from '../components/LineChart'
import MapChart from '../components/MapChart'
import { userTable } from '@/api/system/user'
import { blogTable } from '@/api/blog/blog'
import { serverInfo } from '@/api/system/log'
import { redisInfo, redisKeyDelete, redisKeyList, redisKeyValue } from '@/api/system/log'

export default {
  name: 'Dashboard',
  components: {
    CountTo,
    LineChart,
    MapChart
  },
  data() {
    return {
      loading: true,
      userCount: 0,
      blogCount: 0,
      orderCount: 0,
      loginChartData: {
        title: '本周用户访问量',
        legend: ['访问人数'],
        xAxisData: [],
        yAxisLabel: '{value}',
        expectedLabel: '访问人数',
        expectedData: []
      },
      mapChartData: {
        title: '用户访问分布',
        subtext: '今日',
        legend: ['访问人数'],
        mapTypeControl: {
          'china': true
        },
        mapType: 'china',
        expectedLabel: '访问人数',
        expectedData: []
      },
      mapTypeChoice: '日',
      server: {
        cpu: {
          cpuNum: '',
          used: '',
          sys: '',
          free: ''
        },
        mem: {
          total: '',
          used: '',
          free: '',
          usage: 0
        },
        jvm: {
          total: '',
          used: '',
          free: '',
          usage: 0,
          name: '',
          version: '',
          startTime: '',
          runTime: '',
          home: ''
        },
        sys: {
          computerName: '',
          osName: '',
          computerIp: '',
          osArch: '',
          osTime: '',
          userDir: ''
        }
      },
      cacheLoading: true,
      // 统计命令信息
      commandstats: undefined,
      // 使用内存
      usedmemory: undefined,
      // cache 信息
      cache: {
        info: {},
        dbSize: 1,
        commandStats: []
      },
      // key 列表
      tableLoading: true,
      cacheKeyData: [],
      cacheForm: {}
    }
  },
  mounted() {
    this.handleMessage()
    this.init()
  },
  methods: {
    async init() {
      await Promise.all([this.handleUserCount(), this.handleBlogCount(), this.handleLoginData(), this.handleMapData('0', '今日'), this.handleServerInfo()])
      this.loading = false
      await Promise.all([this.getCacheInfo()])
      this.cacheLoading = false
    },
    handleMessage() {
      const message = this.$route.query.message
      const type = this.$route.query.type || 'success'
      if (message) {
        this.$message({
          type: type,
          message: message
        })
      }
    },
    async handleUserCount() {
      const response = await userTable({
        page: 1,
        limit: 1,
        Q_status_S_EQ: 0
      })
      this.userCount = response.param?.recordsTotal
    },
    async handleBlogCount() {
      const response = await blogTable({
        page: 1,
        limit: 1,
        Q_status_S_EQ: 0
      })
      this.blogCount = response.param?.recordsTotal
    },
    async handleLoginData() {
      const response = await this.$http({
        url: `${process.env.VUE_APP_MODULE_ADMIN_API}/public/visit/chart?days=7`,
        method: 'get'
      })
      this.loginChartData.xAxisData = response.param.category
      this.loginChartData.expectedData = response.param.visit
    },
    async handleMapData(type, name) {
      this.mapTypeChoice = name
      this.mapChartData.subtext = name
      const response = await this.$http({
        url: `${process.env.VUE_APP_MODULE_ADMIN_API}/public/visit/map?type=${type}`,
        method: 'get'
      })

      this.mapChartData.expectedData = response.param
    },
    async handleServerInfo() {
      const response = await serverInfo()
      this.server = this.$api.objectUpdate(this.server, response.param)
    },
    /** 查缓存询信息 */
    async getCacheInfo () {
      // 查询 Redis 监控信息
      const response = await redisInfo()
      this.cache = response.param

      this.commandstats = echarts.init(this.$refs.commandstats, 'macarons')
      const commandStats = []
      response.param.commandStats.forEach(row => {
        commandStats.push({
          name: row.command,
          value: row.calls
        })
      })
      this.commandstats.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            name: '命令',
            type: 'pie',
            roseType: 'radius',
            radius: [15, 95],
            center: ['50%', '38%'],
            data: commandStats,
            animationEasing: 'cubicInOut',
            animationDuration: 1000,
          },
        ],
      });
      this.usedmemory = echarts.init(this.$refs.usedmemory, 'macarons')
      this.usedmemory.setOption({
        tooltip: {
          formatter: '{b} <br/>{a} : ' + this.cache.info.used_memory_human
        },
        series: [
          {
            name: '峰值',
            type: 'gauge',
            min: 0,
            max: 1000,
            detail: {
              formatter: this.cache.info.used_memory_human
            },
            data: [
              {
                value: parseFloat(this.cache.info.used_memory_human),
                name: '内存消耗',
              },
            ],
          },
        ],
      })
      // 查询 Redis Key 列表
      redisKeyList('').then(response => {
        this.cacheKeyData = response.param
        this.tableLoading = false
      }).catch(() => { this.tableLoading = false })
    },
    // 刷新键名列表
    refreshKeys() {
      this.tableLoading = true
      redisKeyList('').then(response => {
        this.cacheKeyData = response.param
        this.tableLoading = false
        this.$refs.cache_key_table.bodyWrapper.scrollTop = 0
      }).catch(() => { this.tableLoading = false })
    },
    // 获取缓存值
    handleKeyValue(key) {
      redisKeyValue(key + '').then(response => {
        this.cacheForm = {
          key: key,
          value: response.param
        }
      })
    },
    handleSearchKeys() {
      this.$prompt('请输入键名模板', '搜索', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        if (value) {
          this.tableLoading = true
          redisKeyList(value).then(response => {
            this.cacheKeyData = response.param
            this.tableLoading = false
            this.$refs.cache_key_table.bodyWrapper.scrollTop = 0
          }).catch(() => { this.tableLoading = false })
        }
      }).catch(() => {})
    },
    // 删除缓存
    handleDeleteKey(key) {
      redisKeyDelete({ key: key }).then(() => {
        this.$modal.msgSuccess('清理缓存[' + key + ']成功')
        this.refreshKeys();
      })
    },
    handleDeleteKeys() {
      this.$prompt('请输入键名模板', '清理缓存', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        if (value) {
          redisKeyDelete({ template: value }).then(() => {
            this.$modal.msgSuccess('清理缓存模板[' + value + ']成功')
            this.refreshKeys();
          })
        }
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 15px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }

  .el-col {
    margin-bottom: 15px;
  }
}

.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (max-width:550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>
